<template>
	<!-- m -->
	<view class="moreContent">
		<view class="teacherList">
			<view
				class="teacher"
				v-for="(item, index) in teacherData"
				:key="index"
				@click="handleDetail(item)">
				<image
					class="teacherImg"
					:src="item.image"
					mode="aspectFill"></image>
				<view class="teacherTel">
					<text>{{ item.name }}</text>
					<text class="tel">{{ item.mobile }}</text>
				</view>
				<view class="teacherJj">
					{{ item.desc }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 *shoproGoodsCard - 单个名师卡片
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
		};
	},
	computed: {
	},
	props: {
		teacherData: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods: {
		//点击名师
		handleDetail(item) {
			this.$emit('handleDetail',item);
		},
	}
};
</script>

<style lang="scss">
//名师
.teacherList {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.teacher {
		width: 327rpx;
		// height: 390rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 0 24rpx;
		padding-bottom: 23rpx;
		
		.teacherImg {
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
			display: block;
			margin: 20rpx auto 26rpx;
		}
		
		.teacherTel {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;
			
			.tel {
				font-size: 24rpx;
				color: #666666;
			}
		}
		
		.teacherJj {
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: justify;
			font-style: normal;
			margin-top: 19rpx;
		}
	}
}
</style>
